<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        table {
            width: 600px;
            cursor: pointer;
        }

        table td {
            text-align: center;
        }

        table th {
            background-color: blueviolet;
        }

        table tr {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="dv">
        请输入姓名:
        <input type="text" value="" id="uname" />
        <br /> 请输入邮箱:
        <input type="text" value="" id="email" />
    </div>

    <input type="button" value="添加" id="btn" />
    <table border="1" cellpadding="0" cellspacing="0" id="tb">
        <thead>
            <tr>
                <th>姓名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody id="tbd">
            <tr>
                <td>小黑</td>
                <td>xiaohei@126.com</td>
            </tr>
        </tbody>
    </table>
    <script>
        /* 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示 */

        // 获取元素
        const btn = document.querySelector('#btn');
        const tbd = document.querySelector('#tbd');
        const uname = document.querySelector('#uname');
        const email = document.querySelector('#email');

        // 添加事件
        btn.onclick = function() {
            // 用户名或密码为空时，弹窗返回
            if (uname.value.length == 0 || email.value.length == 0)
                return alert('请填写姓名或邮箱');
            // 创建元素
            let tr = document.createElement('tr');
            // 追加元素
            tbd.appendChild(tr);
            // 内容填充
            let arr = [];
            arr.push(`<td>${uname.value}</td>\n`);
            arr.push(`<td>${email.value}</td>\n`);
            tr.innerHTML = arr.join('');
            // 清空输入框
            uname.value = email.value = '';
        }
    </script>

</body>

</html>